<!DOCTYPE html>
<html>
<head>
	<title>画布模板</title>
	<style type="text/css">
		*{padding:0px;margin:0px;}
		.canvasbox{width: 500px;margin:100px auto;}
		#mycanvas{background:#000;}
	</style>
	<script src="http://www.jq22.com/jquery/jquery-1.9.1.js"></script>
</head>
<body>
	<div class="canvasbox">
		<input type="text" class="text">
		<select name="" id="">
			<option value="fill">fill</option>
			<option value="stroke">stroke</option>
			<option value="both">both</option>
		</select>
		<canvas id="mycanvas" width="500px" height="400px"></canvas>
	</div>
	<script type="text/javascript" src="modernizr-custom.js"></script>
	<script type="text/javascript">
		

		$(function($) {
		  canvasApp()
		});
		function canvasSupport(){
			return Modernizr.canvas;
		}
		function canvasApp(){
				if(!canvasSupport()){
					return false;
				}else{
					var canvas = $("#mycanvas")[0];
		 			var context = canvas.getContext("2d");
				}
				
		 		$(".text").keyup(function(){
		 			var message = $(this).val();
		 			drawScreen(message)
		 		})		
		 		function drawScreen(message){
		 			context.clearRect(0,0,canvas.width,canvas.height)
		 			context.font="bold 30px 微软雅黑";
		 			context.fillStyle="red";
		 			var textwidth = context.measureText(message).width;
		 			var textleft = (canvas.width-textwidth)/2;
		 			context.fillText(message,textleft,200);
		 			context.strokeStyle="red";
		 			context.strokeText(message,textleft,250,500);
							 				
				}

						

				// 动画函数		
				// function gameLoop(){
				// 	window.setTimeout(gameLoop,500);
				// 	drawScreen()

				// }
				// gameLoop()
			
		}

		 
		

		
	</script>
</body>
</html>